<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common/annulus.css"/>
    <style>
        html,body{
            background: transparent;
        }
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        .title-block {
            width: 3.43rem;
            min-height: 0.44rem;
            background-color: #F8E9E4;
            justify-content: center;
            align-items: center;
        }
        .not-active {
            display: none;
        }
        .cell-head {
            width: 0.76rem;
            background-color: #71381A;
            font-size: 0.14rem;
            color: white;
            font-weight: 600;
            text-align: center;
        }
        .cells-1 {
            height: 0.40rem;
            background-color: #F8E9E4;
            border-left-width: 0.01rem;
            border-bottom-width: 0.01rem;
            border-style: solid;
            border-color: rgba(161,99,69,0.25);
            font-size: 0.14rem;
            color: #231313;
            line-height: 0.40rem;
            text-align: center;
        }
        .cells-2 {
            display: flex;
            height: 0.59rem;
            background-color: #F8E9E4;
            border-left-width: 0.01rem;
            border-bottom-width: 0.01rem;
            border-style: solid;
            border-color: rgba(161,99,69,0.25);
            font-size: 0.14rem;
            color: #231313;
            justify-content: center;
            align-content: center;
            flex-wrap: wrap;
        }
        .cells-3 {
            height: 0.43rem;
            background-color: #F8E9E4;
            border-left-width: 0.01rem;
            border-bottom-width: 0.01rem;
            border-style: solid;
            border-color: rgba(161,99,69,0.25);
            font-size: 0.14rem;
            color: #231313;
            line-height: 0.40rem;
            text-align: center;
        }
        .block {
            background-size: 3.43rem 1.33rem;
            background-image: url(../../image/inquiry/block-background.png);
            background-repeat: no-repeat;
            background-position: center bottom;
        }
        .cloud-left {
            width: 0.50rem;
            height: 0.12rem;
            background-size: 0.50rem 0.12rem;
            background-image: url("../../image/tools/cloud-left.png");
            margin-left: 0.15rem;
            margin-right: 0.10rem;
        }
        .cloud-right {
            width: 0.50rem;
            height: 0.12rem;
            background-size: 0.50rem 0.12rem;
            background-image: url("../../image/tools/cloud-right.png");
            margin-right: 0.15rem;
            margin-left: 0.10rem;
        }
    </style>
</head>
<body>
<div id="today-fortune">
    <div style="width: 100%; height: 4.43rem; background-color: white;">
        <div style="width: 100%; height: 0.30rem"></div>
        <p style="width: 100%; font-size: 0.20rem; line-height: 0.28rem; color: #231313; font-weight: 600; text-align: center;">五格评分</p>
        <div class="flex" style="justify-content: space-between; align-items: center; width: 100%; margin-top: 0.30rem">
            <div id="echarts-left" style="width: 0.92rem; margin-left: 0.20rem">
                <div class="loading">
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="progress">
                        <p id="composite-value" style="font-size: 0.22rem; color: #FE5578; font-weight: 600; margin-top: 0.16rem"></p>
                    </div>
                </div>
            </div>
            <div id="echarts-right" style="width: 2.20rem; margin-right: 0.20rem">
                <p id="description" style="font-size: 0.14rem; line-height: 0.22rem; color: #231313;"></p>
            </div>
        </div>

        <div class="flex" style="width: 100%; justify-content: center; margin-top: 0.32rem">
            <div class="flex" style="border-style: solid; border-width: 0.01rem; border-color: #D0D0D0; width: 3.43rem; height: 2.07rem;">
                <div>
                    <div class="cell-head" style="border-style: solid; border-bottom-width: 0.01rem; border-color: #D0D0D0; height: 0.40rem; line-height: 0.40rem;">繁体字</div>
                    <div class="cell-head" style="height: 0.40rem; line-height: 0.40rem;">拼音</div>
                    <div class="cell-head" style="border-style: solid; border-bottom-width: 0.01rem; border-color: #D0D0D0; height: 0.40rem; line-height: 0.40rem;">康熙笔划</div>
                    <div class="cell-head" style="height: 0.86rem; line-height: 1.05rem;">五格</div>
                </div>
                <div>
                    <div class="flex" style="width: 2.67rem;">
                        <div class="cells-1" id="trans-0" style="width: 0.66rem"></div>
                        <div class="cells-1" id="trans-1" style="width: 0.66rem"></div>
                        <div class="cells-1" id="trans-2" style="width: 0.66rem"></div>
                        <div class="cells-1" id="trans-3" style="width: 0.66rem"></div>
                    </div>
                    <div class="flex" style="width: 2.67rem;">
                        <div class="cells-1" id="pinyin-0" style="width: 0.66rem"></div>
                        <div class="cells-1" id="pinyin-1" style="width: 0.66rem"></div>
                        <div class="cells-1" id="pinyin-2" style="width: 0.66rem"></div>
                        <div class="cells-1" id="pinyin-3" style="width: 0.66rem"></div>
                    </div>
                    <div class="flex" style="width: 2.67rem;">
                        <div class="cells-1" id="stroke-0" style="width: 0.66rem"></div>
                        <div class="cells-1" id="stroke-1" style="width: 0.66rem"></div>
                        <div class="cells-1" id="stroke-2" style="width: 0.66rem"></div>
                        <div class="cells-1" id="stroke-3" style="width: 0.66rem"></div>
                    </div>
                    <div class="flex" style="width: 2.67rem;">
                        <div class="cells-1" id="grids-tgrid" style="width: 0.66rem"></div>
                        <div class="cells-1" id="grids-rgrid" style="width: 0.66rem"></div>
                        <div class="cells-1" id="grids-dgrid" style="width: 0.66rem"></div>
                        <div class="cells-1" id="grids-wgrid" style="width: 0.66rem"></div>
                    </div>
                    <!--<div class="flex" style="width: 2.67rem;">-->
                        <!--<div class="cells-2" id="lunar-birth-year" style="width: 0.66rem">-->
                            <!--<p id="grids-tgrid" style="width: 100%; text-align: center;"></p>-->
                            <!--<p>(水)</p>-->
                        <!--</div>-->
                        <!--<div class="cells-2" id="lunar-birth-month" style="width: 0.66rem">-->
                            <!--<p id="grids-rgrid" style="width: 100%; text-align: center;"></p>-->
                            <!--<p>(水)</p>-->
                        <!--</div>-->
                        <!--<div class="cells-2" id="lunar-birth-day" style="width: 0.66rem">-->
                            <!--<p id="grids-dgrid" style="width: 100%; text-align: center;"></p>-->
                            <!--<p>(水)</p>-->
                        <!--</div>-->
                        <!--<div class="cells-2" id="lunar-birth-hour" style="width: 0.66rem">-->
                            <!--<p id="grids-wgrid" style="width: 100%; text-align: center;"></p>-->
                            <!--<p>(水)</p>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="flex" style="width: 2.67rem;">
                        <div class="cells-3" id="grids-zgrid" style="width: 2.67rem"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="detail"></div>
</body>
</html>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<!--<script type="text/javascript" src="../script/common/echarts/echarts.min.js"></script>-->
<script type="text/javascript">
    var detailEl, compositeValue, description, gridsTgridEl, gridsRgridEl, gridsDgridEl, gridsWgridEl, gridsZgridEl;
    var css=function(t,s){
        s=document.createElement('style');
        s.innerText=t;
        document.body.appendChild(s);
    };
    apiready = function () {
        compositeValue = $api.byId("composite-value");
        description = $api.byId("description");
        gridsTgridEl = $api.byId("grids-tgrid");
        gridsRgridEl = $api.byId("grids-rgrid");
        gridsDgridEl = $api.byId("grids-dgrid");
        gridsWgridEl = $api.byId("grids-wgrid");
        gridsZgridEl = $api.byId("grids-zgrid");

        detailEl = $api.byId("detail");

        getNameDetail();

        api.setRefreshHeaderInfo({
            bgColor: 'rgba(255, 255, 255, 0)',
            textColor: '#000000',
            textDown: '下拉可以刷新',
            textUp: '松开立即刷新',
            textLoading: '正在刷新数据中',
            textTime: '最后更新'
        }, function(ret, err) {
            window.location.reload();
            api.refreshHeaderLoadDone();
        });
    }

    function getNameDetail() {
        api.ajax({
            url: apiUrl + '/tools/name-detail',
            tag: '/tools/name-detail',
            method: 'get',
            data: {
                values: {
                    name: api.pageParam.name,
                    // name: "莫文蔚",
                }
            }
        }, function(ret, err) {
            // api.alert({ msg: JSON.stringify(err) });
            if (ret) {
                if (ret.code == 0) {
                    css('.right:after {' +
                        'transform-origin: left center;' +
                        'transform: rotateZ('+ ret.data.score/100*360 +'deg);' +
                        '}');
                    $api.text(compositeValue, ret.data.score + "%");

                    $api.text(description, ret.data.description);

                    var trans = ret.data.trans;
                    for (var i=0,len=trans.length; i<len; i++)
                    {
                        $api.text($api.byId("trans-" + i), trans[i]);
                    }
                    var pinyin = ret.data.pinyin;
                    for (var a=0,lena=pinyin.length; a<lena; a++)
                    {
                        $api.text($api.byId("pinyin-" + a), pinyin[a]);
                    }
                    var stroke = ret.data.stroke;
                    for (var b=0,lenb=stroke.length; b<lenb; b++)
                    {
                        $api.text($api.byId("stroke-" + b), stroke[b]);
                    }

                    $api.text(gridsTgridEl, "天格:" + ret.data.grids.tgrid);
                    $api.text(gridsRgridEl, "人格:" + ret.data.grids.rgrid);
                    $api.text(gridsDgridEl, "地格:" + ret.data.grids.dgrid);
                    $api.text(gridsWgridEl, "外格:" + ret.data.grids.wgrid);
                    $api.text(gridsZgridEl, "总格:" + ret.data.grids.zgrid);

                    var detailArray = ret.data.detail;
                    for (var i=0,len=detailArray.length; i<len; i++)
                    {
                        $api.append(detailEl,
                            '<div class="flex" style="width: 100%; height: auto; justify-content: center; margin-top: 0.20rem;">' +
                            '<div style="width: 3.43rem; border-radius: 0.055rem; overflow: hidden; background-color: #FDFDFD;">' +
                            '<div class="flex title-block">' +
                            '<div class="cloud-left"></div>' +
                            '<p style="font-size: 0.20rem; color:#643432; font-weight: 600;text-align: center; max-width: 1.90rem;">' + detailArray[i]["name"] + '</p>' +
                            '<div class="cloud-right"></div>' +
                            '</div>' +
                            '<div class="block" style="padding: 0.27rem 0.21rem 0.17rem 0.21rem;">' +
                            '<p id="today-tips" style="color: #643332">' + detailArray[i]["content"] + '</p>' +
                            '</div>' +
                            '</div>' +
                            '</div>');
                    }

                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
                api.closeFrame({
                    name: 'loadingPage'
                });
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }
</script>
